<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .app {
            background: rgb(96, 228, 155);
            width: 400px;
            padding: 50px;
        }

        .nickname {
            color: rgb(254 255 168);
            font-weight: 1000;
            font-size: 20px;
        }

        .text {
            color: rgb(107 107 107);
            font-size: 14px;
            font-family: emoji;
        }

        .code-box {
            text-align: center;
            background: rgb(228 132 132);
            padding: 10px;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 10px 10px 5px #888888;
        }

        .code {
            color: rgb(255,255, 255);
            font-weight: 1000;
            font-size: 55px;
        }

        .high-light {
            color: #f08989;
            /*box-shadow: 10px 10px 5px #888888;*/
            text-shadow: 1px 1px 1px ;
            font-weight: 550;
            font-size: 15px;
        }

        .inscribe-box {
            margin-top: 40px;
            border-left: 2px solid rgb(58, 154, 237);
            padding: 15px 0px 15px 20px;
        }

        .inscribe-text {
            color: #fff;
            font-size: 1px;
        }

        .title {
            color: rgb(254 255 168);
            font-weight: 900;
            font-size: 30px;
        }
        .logo{
            content: url();
            width: 80px;
        }
    </style>
</head>
<body>
<div style="background: rgba(0,0,0,0);padding-left: 30%;">
    <div class="app">
        <!--    网站图标-->
        <div>
            <img class="logo">
        </div>
        <!--    用户名字-->
        <div>
            <p class="nickname">嗨，<span id="hello">您好</span>，</p>
        </div>
        <!--    邮件描述-->
        <div>
            <p class="text">
                <span id="context">context</span>
                <span>，此处是您所需要的</span><span class="high-light">TML</span> 令牌验证码：
            </p>
        </div>
        <!--    验证码-->
        <div class="code-box">
            <p id="code" class="code">验证码</p>
        </div>
        <!--    邮件描述-->
        <div>
            <p class="title">不是您？</p>
            <p class="text">您会收到这封电子邮件，是由于有人视图修改您的 <span class="high-light">TML</span> 账户密码，且提供了<span
                    class="high-light">正确的账户名称。</span>
            </p>
            <p class="text">如果不是您尝试修改密码，可以不用理会这封邮件。</p>
            <p class="text">此电子邮件包含一个权限代码，您需要用它修改您的账户密码，<span class="high-light">切勿与任何人分享此代码</span>。</p>
        </div>
        <!--    结尾落款-->
        <div class="inscribe-box">
            <p class="inscribe-text">祝您愉快，</p>
            <p class="inscribe-text">TML 团队</p>
        </div>
    </div>
</div>
</body>
</html>